<template>
  <div class="unbindDevice">
    <rj-modal
      :title="$t('unbindDevice.unbindDevice')"
      v-if="visible"
      :visible="true"
      :width="1200"
      :footer="null"
      :maskClosable="false"
      @cancel="handelClose"
    >
      <p class="description">
        {{ $t('unbindDevice.description') }}
      </p>
      <div class="step">
        <div class="step-title intl-hide">
          {{ $t('unbindDevice.stepTitle') }}
          <a
            href="https://noc.ruijie.com.cn/help/ArticleList?id=562f210a8bdf4760916088ef336c0d24"
            target="_blank"
            class="common-color-link"
            style="text-decoration: underline"
          >
            <a-icon type="arrow-right" style="color: #000" />
            {{ $t('unbindDevice.clickHere') }}
          </a>
        </div>
        <div>
          {{ $t('unbindDevice.stepOne') }}
        </div>
        <div>
          {{ $t('unbindDevice.stepTwo') }}
        </div>
        <div>
          {{ $t('unbindDevice.stepThree') }}
        </div>
      </div>
      <div>
        <a-form
          :form="form"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 8 }"
        >
          <a-form-item :label="$t('unbindDevice.inputSerial')">
            <a-input
              style="width: 60%; margin-right: 4px"
              v-decorator="[
                'sn',
                {
                  rules: [
                    {
                      validator: snRules,
                    },
                  ],
                },
              ]"
            />
            <button class="unBindDevice" @click="unBindDevice">
              {{ $t('unbindDevice.getPrivateURL') }}
            </button>
          </a-form-item>
          <div ref="exclusiveUrlWrapRef" style="display: none">
            {{ $t('unbindDevice.URLDescription')
            }}<span ref="exclusiveUrlRef" style="color: #ea760d">{{
              exclusiveUrl
            }}</span>
          </div>
        </a-form>
      </div>
      <div style="text-align: right; margin: 15px 0">
        <a-input
          style="width: 15%"
          :placeholder="$t('unbindDevice.inputSerial')"
          v-model="checkSn"
        />
        <button
          class="unBindDevice"
          style="margin: 0 10px"
          @click="getDeveiceList"
        >
          {{ $t('common.search') }}
        </button>
        <a-icon type="reload" class="reload" @click="getDeveiceList" />
      </div>
      <rj-table
        bordered
        :columns="columns"
        :loading="loading"
        :data-source="deviceList"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template slot="renderState" slot-scope="text">
          {{ formatState(text) }}
        </template>
        <template slot="renderExpireTime" slot-scope="text">
          {{ moment(text).format('YYYY/MM/DD HH:mm:ss') }}
        </template>
      </rj-table>
    </rj-modal>
  </div>
</template>

<script>
import { requestHttp, maccApi } from '@utils/index';
import { RjTable } from '@components';
import moment from 'moment';
import { i18nRender } from '@/locales';
export default {
  name: 'unbindDevice',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    'rj-table': RjTable,
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: 'unbindDevice' }),
      sn: '',
      exclusiveUrl: '',
      checkSn: '',
      columns: [
        {
          title: i18nRender('common.sn'), //设备序列号
          dataIndex: 'sn',
          align: 'center',
          key: 'sn',
        },
        {
          title: i18nRender('unbindDevice.unbindKey'), //解绑key
          dataIndex: 'unbindKey',
          align: 'center',
          key: 'unbindKey',
        },
        {
          title: i18nRender('unbindDevice.unbindUrl'), //解绑地址
          dataIndex: 'unbindUrl',
          align: 'center',
          key: 'unbindUrl',
        },
        {
          title: i18nRender('common.status'), //状态
          dataIndex: 'state',
          align: 'center',
          key: 'state',
          scopedSlots: { customRender: 'renderState' },
        },
        {
          title: i18nRender('configLog.confOverview'), //OS类型
          dataIndex: 'remark',
          align: 'center',
          key: 'remark',
        },
        {
          title: i18nRender('userManage.expiredAt'), //上线时间
          dataIndex: 'expireTime',
          align: 'center',
          key: 'expireTime',
          scopedSlots: { customRender: 'renderExpireTime' },
        },
      ],
      pagination: {},
      deviceList: [],
      loading: false,
      current: 1,
      params: {
        page_index: 1,
        page_size: 10,
      },
    };
  },
  created() {
    this.getDeveiceList();
  },
  methods: {
    moment,
    // 查询
    async getDeveiceList() {
      this.data = [];
      this.pagination = { total: 0 };
      this.loading = true;
      let res = await requestHttp({
        api: `${maccApi.MONTER_DEVICEAUTOUNBINDLIST_GET_API.replace(
          '{page_index}',
          this.params.page_index
        ).replace('{page_size}', this.params.page_size)}&sn=${this.checkSn}`,
        method: 'GET',
      });
      console.log(res, '查询结果--------------');
      if (res.code != 0) {
        this.$message.error(
          res.msg || this.$t('unbindDevice.deviceMsgFailure')
        );
        return;
      }
      if (res.totalCount && res.totalCount > 0) {
        let page_index = {
          current: this.current,
          total: res.totalCount,
          showSizeChanger: true,
          showQuickJumper: true,
        };
        this.pagination = page_index;
        this.loading = false;
        this.deviceList = res.list;
      } else {
        this.loading = false;
        this.deviceList = [];
        this.pagination = { total: 0 };
      }
    },
    // 设备序列号校验
    snRules(rule, value, callback) {
      this.sn = value;
      if (value == '') {
        callback(this.$t('devices.tips3'));
        return;
      }
      if (value.length < 13 || value.length > 15) {
        callback(this.$t('quickDevice.length1315'));
        return;
      }
      // console.log(value.length);
    },
    // 获取专属URL
    async unBindDevice() {
      if (this.sn !== '' && this.sn.length >= 13 && this.sn.length <= 15) {
        let res = await requestHttp({
          api: maccApi.MONTER_DEVICEAUTOUNBINDCREAT_POST_API,
          method: 'POST',
          params: { sn: this.sn },
        });
        if (res && res.code == 0) {
          this.exclusiveUrl = res.unbindUrl;
          this.$refs.exclusiveUrlWrapRef.style.display = 'inline-block';
          this.$refs.exclusiveUrlRef.innerHTML = this.exclusiveUrl;
        } else {
          this.$message.error(res.msg);
        }
      }
    },
    formatState(value, row, index) {
      console.log(value, 'vaule-----------------------------');
      let obj = {
        IDLE: this.$t('projectConfig.UNSTARTED'),
        UNBIND: this.$t('unbindDevice.unbind'),
        CANCEL: this.$t('groupOperate.cancle'),
        EXPIRED: this.$t('devices.authExpire'),
      };
      return obj[value] || this.$t('authUser.unknow');
    },
    //table表格分页变化时触发
    handleTableChange(pagination) {
      console.log(pagination);
      this.current = pagination.current;
      this.params.page_index = pagination.current;
      this.params.page_size = pagination.pageSize;
      this.getDeveiceList();
    },
    handelClose() {
      this.$emit('close');
    },
  },
};
</script>

<style lang="less" scoped>
.description {
  background-color: rgba(80, 182, 253, 0.27);
  color: #333;
  padding: 10px;
  border: 1px solid #0071eb !important;
}
.step {
  line-height: 1.8;
  margin-bottom: 20px;
}
.step-title {
  margin-bottom: 5px;
}
.ipt-txt {
  height: 26px;
  line-height: 26px;
  border-radius: 3px;
  border: 1px solid #e1e1e1;
  padding: 0px 10px;
}
.unBindDevice {
  border: 1px solid #2b6afd;
  background: #fff;
  color: #2b6afd;
  height: 32px;
  line-height: 32px;
  min-width: 64px;
  padding: 0 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.unBindDevice:hover {
  background: #497ffd;
  color: #fff;
}
.reload {
  cursor: pointer;
}
.reload:hover {
  color: #497ffd;
}
.ant-col-3 {
  width: 10% !important;
}
</style>
